<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>零代码平台演示</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .app {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding: 0 24px 24px 24px;
      background: #f6f6f6;
      line-height: 1.5;
    }
    img{
      width:100%;
      height:auto;
    }
  </style>
</head>

<body>
  <div class="app">
    <section>
      <h1>静态布局-数据大屏</h1>
      <p>1、基于绝对定位静态布局实现的数据大屏编辑器，组件可自由拖拽放置，任意堆叠层级，同时通过坐标定位、吸附、对齐、参考线等快速实现页面布局；</p>
      <p>2、组件支持多选、复制、粘贴、删除、置顶、置底等右键操作以及快捷键，支持快捷键移动、跨页签复制等。</p>
      <img src="./数据大屏1.gif">
      <img src="./数据大屏2.gif">
      <img src="./数据大屏3.gif">
      <img src="./数据大屏4.gif">

    </section>
    <section>
      <h1>流式布局-移动应用</h1>
      <p>1、基于现代前端开发主流Flex布局以及行列栅格布局实现的移动应用编辑器，能够满足绝大多数场景下的页面布局，且页面具备良好的弹性，在不同设备不同分辨率下都能有良好的展现效果。</p>
      <p>2、在深入Vue的数据对象（dataObject）和渲染函数等底层技术的同时，结合拖拽、Flex布局，实现布局元素的类编程式操作，将元素层级结构转化为用户的可视化操作，最终以JSON载体来描述页面的布局结构和元素关系，最后转化为数据对象交由渲染函数进行渲染。</p>
      <img src="./移动应用1.gif">
      <img src="./移动应用2.gif">
      <p>3、响应式产物</p>
      <p>产物页面具备响应性。</p>
      <img src="./移动应用3.gif">
    </section>
    <section>
      <h1>流式布局-分析报告</h1>
      <p>基于流式布局的分析报告编辑器，通用的原子组件，面向分析报告的业务场景。</p>
      <img src="./分析报告.gif">
    </section>
    <section>
      <h1>组件联动与事件</h1>
      <p>基于响应式编程的强大事件模块，自由配置实现组件间的联动与交互。</p>
      <img src="./事件联动1.gif">
      <img src="./事件联动2.gif">
    </section>
    <!-- <section>
      <h1>定制化原子组件</h1>
      <p>集成图表、GIS、WebGL等。</p>
      <img src="./3D地图配置.gif">
      <img src="./3D地图.gif">
    </section> -->
    <section>
      <h1>主题换肤</h1>
      <p>原子组件可一键换肤且可自由拓展。</p>
      <img src="./主题换肤1.gif">
      <img src="./主题换肤2.gif">
    </section>
    <section>
      <h1>组件动态加载</h1>
      <p>按需加载产物所使用的组件。</p>
      <img src="./动态加载多.gif">
      <img src="./动态加载少.gif">
    </section>
  </div>
</body>

</html>